<template>
  <div class="list-page">
    <div class="list">
      <div v-for="(e, i) in list" :key="i"></div>

      <el-card
        class="box-card"
        v-for="(e, i) in list"
        :key="i"
        shadow="hover"
        :body-style="{ padding: 0 }"
      >
        <div slot="header" class="card-head">
          <span>卡片名称</span>

          <div style="float: right; padding: 3px 0">
            <el-switch v-model="form.delivery"> </el-switch>
            <el-button style="margin-left: 10px" type="text">编辑</el-button>
            <el-button style="margin-left: 10px" type="text">删除</el-button>
          </div>
        </div>
        <div class="card-body">
          <div>频率:</div>
          <div>内容:</div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script> 
export default {
  data() {
    return {
      list: Array(31)
        .fill(1)
        .map((e, i) => i + 1),
      form: {},
    };
  },
  methods: {
    test(val) {
      console.log(val);
    },
  },
};
</script>

<style>
.list {
  max-width: 500px;
}
 
.card-head,.card-body{
 padding: 10px;
}
.card-head{
 line-height: 2;
}
.card-body{
 border-top: 1px solid #cccccc70;
 
}
.box-card{
  margin-bottom: 10px;
}
</style>
